<template>
  <WidgetContainer>
    <div
      v-loading="isVisualVappShowLoadingProgress && isLoading"
      class="chartMain page-table"
      :class="`${componentStyleClass} ${componentStyle}-Style`"
    >
      <div :id="'chartMain' + chartId" :ref="chartId" class="displayBox chartMain-inner">
        <Tooltip ref="Tooltip" :component-style="componentStyle" type="vxeTable" />
        <AdvancedLinkageToolbar :wid="widgetInstanceId" :config="config" />
        <ComponentTitle :property="config.config.property" :title-text-style="getCssStyle('title')" />
        <div v-show="!isDataAbnormal" class="btn-box" :style="boxStyle">
          <el-button
            v-if="isExport"
            :disabled="!!taskId && tableData && tableData.length > 0"
            type="primary"
            class="exportBtn"
            size="default"
            :style="exportStyle"
            @click.stop="exportDataAll()"
          >
            {{ $demoi18n('view.table.export') }}
          </el-button>
          <el-button
            v-if="tableCheckBox"
            type="primary"
            class="exportBtn"
            :style="checkStyle"
            size="default"
            :disabled="checkBtnDisabled"
            @click.stop="exportDataChecked()"
          >
            {{ $demoi18n('view.table.checkExport') }}
          </el-button>
        </div>
        <div
          v-show="!isDataAbnormal"
          v-visual-tooltip="getTooltip()"
          class="tableContentBox"
          :style="{ ...tableContentBox, ...boxStyle }"
        >
          <div class="tableContentBox-main">
            <vxe-grid
              ref="basicVxeTable"
              :class="`${adjustClass} table-${typeSetting} cont-${contShowType} ${isNoData?'empty-table':''}`"
              :border="borderType"
              :row-config="{ isHover: true, isCurrent: true }"
              :stripe="contentExtraStyle.isStripeVisiable"
              auto-resize
              height="auto"
              :header-cell-style="headerStyle"
              :cell-style="cellStyle"
              :footer-cell-style="footerStyle"
              :columns="tableColumn"
              :data="tableData"
              :show-header="hasHeader"
              :show-footer="isSummary"
              :footer-method="footerMethod"
              :pager-config="isNoData?null:tablePage"
              :sort-config="tableSort"
              :span-method="mergeRowMethod"
              @page-change="handlePageChange"
              @cell-click="handleCellClick"
              @header-cell-click="handleHeaderCellClick"
              @footer-cell-click="handleFooterCellClick"
              @sort-change="handleSortChange"
              @filter-change="handleFilterChange"
              @cell-mouseenter="mouseEnter"
              @cell-mouseleave="mouseLeave"
              @checkbox-change="handleCheckboxChange"
              @checkbox-all="handleCheckboxAll"
            >
              <template #empty>
                {{ noDataMsg }}
              </template>
              <!--自定义插槽 custom_default-->
              <template #custom_default="{ row, column }">
                <span>
                  <!-- 百分比 -->
                  <el-progress
                    v-if="
                      customStyle(row, column) === 'progressAndPercentage' || customStyle(row, column) === 'progress'
                    "
                    :style="percentageStyle(row, column)"
                    :percentage="percentageTrueValue(row, column)"
                    :color="percentageColor(row, column)"
                    :show-text="false"
                  ></el-progress>
                  <span
                    v-if="
                      customStyle(row, column) === 'progressAndPercentage' || customStyle(row, column) === 'percentage'
                    "
                    :class="jumpCellStyle(row, column)"
                  >{{ `${percentageValue(row, column)}%` }}</span>

                  <!-- 状态 -->
                  <Icon
                    v-if="
                      (customStyle(row, column) === 'statusAndIcon' || customStyle(row, column) === 'icon') &&
                        statusIcon(row, column)
                    "
                    :conf="statusIcon(row, column)"
                    :style="{
                      verticalAlign: 'middle',
                      textIndent: 0,
                    }"
                  />
                  <span
                    v-if="customStyle(row, column) === 'statusAndIcon' || customStyle(row, column) === 'status'"
                    :style="{
                      verticalAlign: 'middle',
                    }"
                    :class="jumpCellStyle(row, column)"
                  >{{ row[column.property] }}</span>

                  <!-- 其他 -->
                  <span v-if="!customStyle(row, column)" :class="jumpCellStyle(row, column)">{{
                    row[column.property]
                  }}</span>
                </span>
              </template>
            </vxe-grid>
          </div>
        </div>
        <AbnormalData :isDataAbnormal="isDataAbnormal" :boxBgColor="boxBgColor" :abnormalType="abnormalType" />
      </div>
    </div>
  </WidgetContainer>
</template>
<script lang="jsx">
import dfCssStyle from './config/cssStyle-default.js';
import AdvancedLinkageToolbar from '@/components/common/advanced-linkage/advanced-linkage-toolbar.vue';
import { fixAdvLinkage } from '@/components/common/advanced-linkage/advanced-linkage-util.js';
import Icon from '@/components/common/icon/icon.vue';
import WidgetContainer from '@/components/common/widget-container/widget-container.vue';
import chartBase from '@/mixin/chart-base.js';
import tableBase from '@/mixin/table/table-base.js';
import dataModel from '@/models/panel-config-data.js';
import storage from '@/utils/ado-self/ado-storage';
import { EMIT_PARAMS_OBJ } from '@/utils/constant';
import { clone, convertValue, debounce, dePermil, getPageId, isEmpty } from '@/utils/util';
import VXETable from 'vxe-table';
import XEUtils from 'xe-utils';
import AbnormalData from '../common/abnormal-data/abnormal-data.vue';
import ComponentTitle from '../common/component-title/component-title.vue';
import NoData from '../common/no-data/no-data.vue';
import Tooltip from '../common/tooltip/tooltip.vue';
import config from './config/config';
import filterInput from './components/filterInput';

const style = {
  light: {
    borderColor: '#E8EAEC',
    box: { backgroundColor: '#FFF', borderTop: '' },
    row: { backgroundColor: '#555555' },
    header: {
      backgroundColor: '#EEF3F5',
      color: '#A6A7A7',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
      showStyle: 'noWrap',
    },
    footer: {
      color: '#A6A7A7',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
    },
    title: { color: '#3C3C3C' },
    cell: { fontSize: '14px', textAlign: 'left' },
  },
  dark: {
    borderColor: '#1a3f60',
    box: { backgroundColor: '#0D263A', borderTop: '' },
    row: {
      backgroundColor: '#102D44',
      color: '#fff',
    },
    header: {
      backgroundColor: '#193A57',
      color: '#8BB4D0',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
      showStyle: 'noWrap',
    },
    footer: {
      color: '#8BB4D0',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
    },
    title: { color: '#01F5F5' },
    cell: {
      fontSize: '14px',
      textAlign: 'left',
      color: '#ffffff',
    },
  },
  real: {
    borderColor: '#393939',
    box: { backgroundColor: '#232323', borderTop: '' },
    row: {
      backgroundColor: '#232323',
      color: '#eee',
    },
    header: {
      backgroundColor: '#333',
      color: '#eee',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
      showStyle: 'noWrap',
    },
    footer: {
      color: '#eee',
      fontWeight: 'normal',
      fontSize: '14px',
      textAlign: 'left',
    },
    title: { color: '#01F5F5' },
    cell: {
      fontSize: '14px',
      textAlign: 'left',
      color: '#ffffff',
    },
  },

};
export default {
  name: 'PageTable',
  components: { ComponentTitle, NoData, Tooltip, WidgetContainer, AdvancedLinkageToolbar, Icon, AbnormalData },
  mixins: [chartBase, tableBase],
  props: ['pareentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'w', 'h', 'isDesignView'],
  data() {
    return {
      isLoading: true,
      tableColumn: [],
      selectRow: {},
      tableData: [],
      tableDataForOutobj: [], // 用于给横表隐藏了某行数据时，普通联动却要发出这行数据的值
      configTableColumn: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        align: 'left',
        pageSizes: '0'.repeat(100).split('').map((n, i) => i + 1),
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true,
        enabled: false,
      },
      tableSort: {
        remote: true,
      },
      isNoData: false,
      orgConfig: [],
      chartId: '',
      config: null,
      title: '',
      convertValue: convertValue,
      dfCssStyle,
      style: style,
      componentStyle: window._adoPremise.uc.theme,
      hasHeader: true,
      isSummary: false,
      tableHeight: '500px',
      isExport: false,
      typeSetting: 'vertical',
      isThousandSeparator: true,
      tableCheckBox: false,
      firstLoad: true,
      sums: [this.$demoi18n('view.table.sums')],
      isBlank: true, // 点击处是否空白
      isFirstRequest: true,
      borderType: '',
      contentStyle: {},
      footerStyle: {},
      contentExtraStyle: {},
      thresholdColumns: [],
      thresholdRows: [],
      isFilter: false,
      checkBtnDisabled: true,
      totalDecimal: 0,
      name: 'page-table',
      contShowType: 'noWrap',
      noDataMsg: ' ',
    };
  },
  computed: {
    boxStyle() {
      const { property } = this.config.config;
      const { table } = property;
      const backgroundColor = (table && table.backgroundColor) || this.style[this.componentStyle].box.backgroundColor;
      return { backgroundColor: `${backgroundColor} !important` };
    },
    tableContentBox() {
      const { property } = this.config.config;
      property.padding = property.padding || {};
      const { top = 0, left = 20, bottom = 10, right = 20 } = property.padding;
      const padding = this.getCssStyle({ top, left, bottom, right });
      return {
        padding: `${padding.top} ${padding.right} ${padding.bottom} ${padding.left}`,
      };
    },
    exportStyle() {
      return this.btnStyle('export');
    },
    checkStyle() {
      return this.btnStyle('check');
    },
  },
  watch: {
    w: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        this.deboumceHandlePagerAdjust?.(newVal);
        this.deboumceSetAdjustWH?.();
        this.deboumceUpdateFixedColumnStyle?.();
      },
    },
    h: {
      handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        this.deboumceUpdateFixedColumnStyle();
        this.deboumceSetAdjustWH();
      },
    },
  },
  created() {
    this.orgConfig = config;
    this.config = JSON.parse(JSON.stringify(this.orgConfig));
    this.chartId = `${this.widgetInstanceId}_01`;

    // 横表左侧固定列背景颜色替换防抖事件
    this.deboumceUpdateFixedColumnStyle = debounce(function() {
      this.updateFixedColumnStyle();
    }, 30);

    // 表格页脚元素自适应防抖事件
    this.deboumceHandlePagerAdjust = debounce(function(w) {
      this.handlePagerAdjust(w);
    }, 30);

    // 表格自适应防抖事件
    this.deboumceSetAdjustWH = debounce(function() {
      this.setAdjustWH();
    }, 30);
  },
  mounted() {
    // 点击空白处传空值
    let oDiv = document.querySelector(`#chartMain${this.chartId}`);
    oDiv.onclick = event => {
      // 排除筛选框和页脚
      const path = event.composedPath();
      const otherBtn = path.find(target => {
        const classList = Array.from(target.classList || []);
        const excludeClassArr = [
          'filter-wrap',
          'vxe-pager--sizes',
          'vxe-pager--jump-prev',
          'vxe-pager--prev-btn',
          'vxe-pager--btn-wrapper',
          'vxe-pager--next-btn',
          'vxe-pager--jump-next',
          'vxe-pager--jump',
        ];
        const isExclude = excludeClassArr.some(eclass => classList.includes(eclass));
        return isExclude;
      });
      if (otherBtn) {
        this.isBlank = false;
      }
      if (this.isBlank) {
        this.$refs.basicVxeTable.setCurrentRow();
        this.revertStyle();
        this.sendEmptyMessages();
      }
      this.isBlank = true;
    };
    oDiv = null;

    // 筛选框渲染器
    this.renderFilterTemplate();
  },
  methods: {
    renderFilterTemplate() {
      // 创建一个简单的输入框筛选
      VXETable.renderer.add('FilterInput', {
        showFilterFooter: false,

        // 筛选模板
        renderFilter(renderOpts, params) {
          return <filterInput params={ params }></filterInput>;
        },

        // 重置数据方法
        filterResetMethod({ options }) {
          options.forEach(option => {
            option.data = '';
          });
        },

        // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
        filterRecoverMethod({ option }) {
          option.data = '';
        },

        // 筛选方法
        filterMethod({ option, row, column }) {
          const { data } = option;
          const cellValue = XEUtils.get(row, column.field);
          if (cellValue) {
            return cellValue.toString().indexOf(data) > -1;
          }
          return false;
        },
      });
    },

    // 初始加载时 以及 编排面更改配置时 触发
    loadWidget(pageStatus) {
      this.pageStatus = pageStatus;
      this.tablePage.currentPage = 1;
      this._updateConfigProperty();
      this.updateConfigDataValue();
      this.updateConfigData();
      this.updateComponentByResolution();

      if (window.isLocalEnv || this.emitComponentStatus) {
        this.updateParams(pageStatus);
        this.debounceGetData();
      }
      this.afterLoadWidget();
    },
    _updateConfigProperty() {
      this.updateExtraStyle();
      const {
        componentStyle,
        title,
        hasHeader,
        isSummary,
        isPagination,
        isThousandSeparator,
        typeSetting,
        tableCheckBox = false,
        totalDecimal,
        defaultPageSize,
        columnSetList,
      } = this.config.config.property;
      const { isExport } = this.config.config.data;

      // xtag数据接口未通，为sit转测临时修改
      this.isExport = isExport;
      this.hasHeader = hasHeader === undefined ? true : hasHeader;
      this.isSummary = isSummary;
      this.tablePage.enabled = isPagination === undefined ? true : isPagination;
      this.typeSetting = typeSetting || 'vertical';
      this.isThousandSeparator = isThousandSeparator === undefined ? true : isThousandSeparator;
      this.totalDecimal = totalDecimal;
      this.tableCheckBox = tableCheckBox;
      this.tablePage.pageSize = defaultPageSize;
      this.noDataMsg = this.noDataMessage();
      this.updateColumnIdAndConfig(columnSetList);

      // 选择公共数据源不显示导出按钮
      if (this.config.config.data.dataSourceType === 'xMinerPublicDatabase') {
        this.isExport = false;
        this.tableCheckBox = false;
      }

      this.updateStyle();

      this.params = {
        pageIndex: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        total: true,
      };
      this.updateConfigProperty();
    },
    updateExtraStyle() {
      this.contentExtraStyle = this.getCssStyle('contentExtraStyle');
    },

    // 行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const { extension } = this.config.config.property;
      const fields = extension.map(ext => ext.column);
      const cellValue = this.getCellValue(row[column.property]);
      const extData = extension.find(extItem => extItem.column === column.property);
      let extValues = [];
      if (extData) {
        extValues = extData.value;
      }
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow &&
        extValues.includes(this.getCellValue(prevRow[column.property])) &&
        this.getCellValue(prevRow[column.property]) === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow &&
          extValues.includes(this.getCellValue(nextRow[column.property])) &&
          this.getCellValue(nextRow[column.property]) === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
      return null;
    },
    getCellValue(value) {
      return String(this.getValueNum(value));
    },

    _dealDataWidth(data, adaptSetting, tableData, widthAuto) {
      if (Boolean(adaptSetting) && ['1', '3'].includes(adaptSetting.type)) {
        // 完全自定义
        if (adaptSetting.tableData.length > 0 && this.typeSetting !== 'horizontal') {
          data.width = '';
          data.minWidth = '';
          if (adaptSetting.tableData.length === tableData.length) {
            adaptSetting.tableData.forEach(item => {
              if (item.name === data.field) {
                data.minWidth = `${Math.floor(convertValue(item.width, 0, 'w'))}px`;
              }
            });
          } else {
            adaptSetting.tableData.forEach(item => {
              if (item.name === data.field) {
                data.width = `${Math.floor(convertValue(item.width, 0, 'w'))}px`;
              }
            });
          }
          const curComp = document.getElementById(`chartMain${this.chartId}`);
          const tableBodyWarrper = curComp.getElementsByClassName('vxe-table--body-wrapper')[0];
          if (tableBodyWarrper) {
            tableBodyWarrper.style.overflow = 'auto';
          }
        }
      } else {
        data.width = widthAuto || !data.width || String(data.width) === '0' ? '' : convertValue(data.width, 0, 'w');
      }
    },

    updateConfigDataValue() {
      // 处理重绘保留事件的场景，记住页数和页码配置
      if (this.isFirstRequest) {
        const pageId = getPageId(this);
        const { tenantId } = window._adoPremise;
        const pageStatus = storage.session.get(`${pageId}_${tenantId}`) || {};
        const refreshObj = pageStatus[`state_${this.widgetInstanceId}`];
        if (refreshObj) {
          const { pageIndex, pageSize } = refreshObj;
          this.tablePage.currentPage = pageIndex;
          this.tablePage.pageSize = pageSize;

          // 记住重绘场景的时候,接口请求的也要保持一致
          this.params.pageIndex = this.tablePage.currentPage;
          this.params.pageSize = this.tablePage.pageSize;
        }
      }

      const configData = clone(this.config.config.data);
      const { tableData } = configData;
      const { headerSort, headerFilter, extension } = this.config.config.property;

      // 宽度|完全自适应
      const adaptSetting = this.getAdaptSetting();
      let widthAuto = false;
      if (adaptSetting) {
        widthAuto = adaptSetting.type === '0' || adaptSetting.type === '2';
      }

      tableData.forEach(data => {
        data.title = data.field;

        // 特殊插槽渲染
        if ((data.fieldType !== 'number' && data.fieldType !== 'string') || this.getJumpUrls(data).length > 0) {
          data.slots = {

            // 对应自定义插槽的名称
            default: 'custom_default',
          };
        }
        this._dealDataWidth(data, adaptSetting, tableData, widthAuto);

        // 排序
        data.sortable = headerSort;
        if (extension.map(item => item.column).includes(data.field)) {
          data.sortable = false;
        }
        if (headerFilter) {
          data.filters = [{ data: '' }];
          data.filterRender = { name: 'FilterInput' };
        }
        const hstyle = this.getCssStyle('headerStyle', this.style[this.componentStyle].header);
        const cstyle = this.getCssStyle('contentStyle', this.style[this.componentStyle].cell);
        const fstyle = this.getCssStyle('footerStyle', this.style[this.componentStyle].footer);
        data.showOverflow = cstyle.showStyle === 'noWrap' || !cstyle.showStyle ? 'tooltip' : false;
        data.showHeaderOverflow = hstyle.showStyle === 'noWrap' || !hstyle.showStyle ? 'tooltip' : false;
        data.showFooterOverflow = fstyle.showStyle === 'noWrap' || !fstyle.showStyle ? 'tooltip' : false;
      });
      if (this.tableCheckBox) {
        tableData.unshift({ type: 'checkbox', width: convertValue(45, 0, 'w').toFixed(0) });
      }
      this.configTableColumn = tableData;
      this.checkBtnDisabled = true;
    },

    // 数据格式化
    numFormat(result) {
      if (!result || !result.length) {
        return [];
      }
      const { tableData } = this.config.config.data;
      result.forEach(item => {
        if (this.typeSetting === 'horizontal') {
          const curCell = tableData.find(column => column.field === item.col0);
          if (curCell) {
            Object.entries(item).map(([key]) => {
              item[key] = this.handleThousandSeparator(curCell, item[key]);
            });
          }
        } else {
          Object.entries(item).map(([key]) => {
            const curCell = tableData.find(column => column.field === key);
            if (curCell) {
              item[key] = this.handleThousandSeparator(curCell, item[key]);
            }
          });
        }
      });
      return result;
    },
    footerMethod({ columns, data }) {
      return this.footerMethods(columns, data);
    },

    // 排序事件处理
    handleSortChange({ property, order }) {
      if (!order) {
        return;
      }
      let { dataSourceType } = this.config.config.data;
      const { tableData } = this.config.config.data;
      const { mapping } = tableData.find(item => item.field === property);
      if (dataSourceType === 'xMinerPublicDatabase') {
        dataSourceType = 'xMiner';
      }
      if (!this[`handleSort${dataSourceType}`]) {
        return;
      }
      this[`handleSort${dataSourceType}`](mapping, order);
      this.params.pageIndex = this.tablePage.currentPage;

      this.getChartData();
    },
    handleSortxMiner(mapping, order) {
      if (!this.params.params) {
        this.params.params = [];
      }
      const orderField = this.params.params.find(item => item.code === 'orderField');
      const orderType = this.params.params.find(item => item.code === 'orderType');

      // 清除已存在的属性
      if (orderField) {
        const indexCode = this.params.params.indexOf(orderField);
        this.params.params.splice(indexCode, 1);
      }
      if (orderType) {
        const indexLevel = this.params.params.indexOf(orderType);
        this.params.params.splice(indexLevel, 1);
      }

      // 赋予新值
      const orderFieldParams = [{ code: 'orderField', value: mapping }];
      const orderTypeParams = [{ code: 'orderType', value: order }];
      this.params.params = [...this.params.params, ...orderFieldParams, ...orderTypeParams];
    },

    // Dac数据源与xminer处理方式相同
    handleSortDac(mapping, order) {
      this.handleSortxMiner(mapping, order);
    },
    handleSortxTag(mapping, order) {
      this.params.orderConditions = [];
      const orderParams = { orderField: mapping, orderType: order };
      this.params.orderConditions.push(orderParams);
    },

    handleFilterChange({ column, property, values, datas, filterList, $event }) {
      let { dataSourceType } = this.config.config.data;
      const { tableData } = this.config.config.data;
      const { mapping } = tableData.find(item => item.field === property);
      if (dataSourceType === 'xMinerPublicDatabase') {
        dataSourceType = 'xMiner';
      }
      if (!this[`handleFilter${dataSourceType}`]) {
        return;
      }
      this[`handleFilter${dataSourceType}`](mapping, datas);
      this.params.pageIndex = 1;
      this.getChartData();
      this.isFilter = true;
    },

    handleFilterxMiner(mapping, datas) {
      if (!this.params.params) {
        this.params.params = [];
      }
      const filterField = this.params.params.find(item => item.code === mapping);

      // 清除已存在的属性
      if (filterField) {
        const indexCode = this.params.params.indexOf(filterField);
        this.params.params.splice(indexCode, 1);
      }

      // 赋予新值
      if (!datas[0]) {
        return;
      }
      const filterFieldParams = [{ code: mapping, value: datas[0] }];
      this.params.params = [...this.params.params, ...filterFieldParams];
    },
    handleFilterxTag(mapping, datas) {
      // 检查xtag参数对象
      if (!this.params.conditions) {
        this.params.conditions = [{}];
      }
      if (!this.params.sqlParams) {
        this.params.sqlParams = [];
      }

      // 更新splParams
      const target = this.params.sqlParams;
      const paramIndex = target.findIndex(p => String(p.key) === String(mapping));
      const paramItem = { key: mapping, value: datas[0] };
      if (paramIndex === -1) {
        if (!isEmpty(datas[0])) {
          target.push(paramItem);
        }
      } else {
        // 存在，但为空值，从target中移除
        if (isEmpty(datas[0])) {
          target.splice(paramIndex, 1);
        } else {
          target.splice(paramIndex, 1, paramItem);
        }
      }

      // 检查xtag参数对象 conditions[0][type]
      const type = 'terms';
      if (!this.params.conditions[0][type]) {
        this.params.conditions[0][type] = [];
      }

      // 找到同名的参数,conditions参数赋值
      let itemIndex;
      let item;
      this.params.conditions[0][type].forEach((paramsConditionObj, index) => {
        const keys = Object.keys(paramsConditionObj);
        if (keys.includes(mapping)) {
          item = paramsConditionObj;
          itemIndex = index;
        }
      });
      if (isEmpty(datas)) {
        if (item) {
          this.params.conditions[0][type].splice(itemIndex, 1);
        }
      } else {
        if (item) {
          item[mapping] = datas;
        } else {
          this.params.conditions[0][type].push({
            [mapping]: datas,
          });
        }
      }
    },

    // api请求获取图表数据
    getChartData() {
      const { data } = this.config.config;

      // 如果dataSourceType为静态数据,把数据放到Vuex，发出事件，然后退出
      if (data.dataSourceType === 'staticData') {
        const result = this.getStaticData();
        this.sendDataToConfig(result);
        if (this.$refs.basicVxeTable) {
          this.$refs.basicVxeTable.reloadColumn(this.configTableColumn);
        }
        this.handleResult(result, data.dataSourceType);
        this.updateFixedColumnStyle();
        setTimeout(() => {
          this.deboumceSetAdjustWH();
        }, 100);

        // 重置数据异常状态
        this.resetAbnormalType();
        this.isLoading = false;
        return;
      }

      // api请求,拿到数据
      this.isLoading = true;
      this.isNoData = false;
      this.autoRefresh();
      const method = `getChartData${data.dataSourceType}PageTable`;
      const params = this.getCorrectParams(this.params, data.dataSourceType);
      dataModel[method](params, data)
        .then(result => {
          // 重置数据异常状态
          this.resetAbnormalType();
          this.reportIfFieldsError(this.getParams()?.propertyMapping, result.data);
          if (this.autoRefreshIsSameRes(result)) {
            return;
          }
          if (this.$refs.basicVxeTable) {
            this.$refs.basicVxeTable.reloadColumn(this.configTableColumn);
          }
          this.apiResult = result;
          const showResult = JSON.parse(JSON.stringify(result.data));
          this.sendDataToConfig(showResult);
          this.handleResult(result, data.dataSourceType);
          this.updateFixedColumnStyle();
          this.handleEmitEvent();
          setTimeout(() => {
            this.deboumceSetAdjustWH();
          }, 100);
        })
        .catch(err => {
          this.handleChartDataError(err);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleResult(result, source) {
      let tableData = [];
      if (source === 'staticData') {
        tableData = result || [];
        this.tablePage.total = result.length;
      } else {
        tableData = result.data || [];
        this.tablePage.total = result.total;
      }

      // 转换tableData数据类型
      let configTableData = this.config.config.data.tableData;
      if (this.curComp) {
        configTableData = this.config.config.data.table.tableData;
      }
      tableData.forEach(data => {
        Object.entries(data).map(([key, val]) => {
          const curColumn = configTableData.find(col => col.field === key);
          if (curColumn && (curColumn.fieldType === 'string' || curColumn.fieldType === 'status') && data[key]) {
            data[key] = data[key] ? data[key].toString() : '';
          }
        });
      });

      const hstyle = this.getCssStyle('headerStyle', this.style[this.componentStyle].header);
      const cstyle = this.getCssStyle('contentStyle', this.style[this.componentStyle].cell);
      const fstyle = this.getCssStyle('footerStyle', this.style[this.componentStyle].footer);
      this.contShowType = cstyle.showStyle === 'noWrap' || !cstyle.showStyle ? 'noWrap' : 'wrap';

      const tableColumn = this.configTableColumn;
      tableColumn.forEach(data => {
        data.showOverflow = 'tooltip'; // 不能设为false，不然cell-enter事件会失效，用css修改驱动换行就好
        data.showHeaderOverflow = hstyle.showStyle === 'noWrap' || !hstyle.showStyle ? 'tooltip' : false;
        data.showFooterOverflow = fstyle.showStyle === 'noWrap' || !fstyle.showStyle ? 'tooltip' : false;

        // 表格组件的表头配置支持国际化
        data.filed = this.$demoi18n(data.filed);
        data.title = this.$demoi18n(data.title);
      });
      this.isNoData = tableData.length === 0 && !this.isFilter;
      this.isFilter = false;

      let { nullSet } = this.config.config.property;
      nullSet = nullSet === undefined ? null : nullSet;
      tableData.forEach((data, index) => {
        Object.entries(data).map(([val]) => {
          data[val] = data[val] === null ? nullSet : data[val];
        });
        data['v14s_table_id'] = `row_${index}`;
      });

      // 判断横纵表
      if (this.typeSetting === 'horizontal') {
        this.reverseTable(tableColumn, tableData);
      } else {
        this.handleThreshold(tableColumn, tableData);
        this.tableData = this.numFormat(tableData);
        this.tableColumn = tableColumn;
      }

      // 处理重绘保留事件的场景
      if (this.isFirstRequest) {
        this.handleRefreshState();
      }
    },

    // 反转横表方法
    reverseTable(columns, list) {
      const { hasColumnHeader = true } = this.config.config.property;
      const buildData = [];
      const buildDataForOutobj = [];
      let rowIndex = 0;
      const customSlots = [];
      columns.forEach(column => {
        if (column.visible) {
          buildData[rowIndex] = { col0: column.title };
          list.forEach((row, colIndex) => {
            buildData[rowIndex][`col${colIndex + 1}`] = row[column.field];
          });
          if (column.slots) {
            customSlots.push(column.field);
          }
          rowIndex++;
        }
        buildDataForOutobj[rowIndex] = { col0: column.title };
        list.forEach((row, colIndex) => {
          buildDataForOutobj[rowIndex][`col${colIndex + 1}`] = row[column.field];
        });
      });

      const adaptSetting = this.getAdaptSetting();
      let adjustHeader = [];
      if (['1', '3'].includes(adaptSetting.type)) {
        const curComp = document.getElementById(`chartMain${this.chartId}`);
        const tableBodyWarrper = curComp.getElementsByClassName('vxe-table--body-wrapper')[0];
        if (tableBodyWarrper) {
          tableBodyWarrper.style.overflow = 'auto';
        }
        adjustHeader = adaptSetting.tableData.filter(child => String(child.name) === this.$demoi18n('panel.label.tableHeader'));
      }
      const buildColumns = [
        {
          field: 'col0',
          fixed: 'left',
          width: adjustHeader.length > 0 ? adjustHeader[0].width : '',
          showOverflow: this.contentStyle.showStyle === 'noWrap' || !this.contentStyle.showStyle ? 'tooltip' : false,
          showFooterOverflow:
            this.footerStyle.showStyle === 'noWrap' || !this.footerStyle.showStyle ? 'tooltip' : false,
        },
      ];

      list.forEach((item, index) => {
        let obj = {};
        if (['1', '3'].includes(adaptSetting.type)) {
          const adjustItem = adaptSetting.tableData.filter(child => Number(child.name) - 1 === index);
          obj = {
            field: `col${index + 1}`,
            width: adjustItem.length > 0 ? adjustItem[0].width : '',
          };
        } else {
          obj = {
            field: `col${index + 1}`,
          };
        }
        obj.showOverflow = this.contentStyle.showStyle === 'noWrap' || !this.contentStyle.showStyle ? 'tooltip' : false;
        obj.showFooterOverflow = obj.showOverflow;
        if (customSlots.length > 0) {
          obj.slots = { default: 'custom_default' };
        }
        buildColumns.push(obj);
      });

      this.handleThreshold(buildData, list);

      // 判断列头
      if (!hasColumnHeader) {
        buildColumns.shift();
        buildData.forEach(data => {
          delete data.col0;
        });
      }
      if (this.tableCheckBox) {
        const CHECKBOX_WIDTH = 45;
        buildColumns.unshift({
          type: 'checkbox',
          width: convertValue(CHECKBOX_WIDTH, 0, 'w').toFixed(0),
          fixed: 'left',
        });
      }
      this.tableData = this.numFormat(buildData);
      this.tableDataForOutobj = this.numFormat(buildDataForOutobj);
      this.tableColumn = buildColumns;
    },
    handleRefreshState() {
      // 重绘后保留发出事件状态
      const pageId = getPageId(this);
      const { tenantId } = window._adoPremise;
      const pageStatus = storage.session.get(`${pageId}_${tenantId}`) || {};
      const refreshObj = pageStatus[`state_${this.widgetInstanceId}`];
      if (!refreshObj) {
        this.isFirstRequest = false;
        return;
      }
      const { row } = refreshObj;
      if (Object.keys(row).length === 0) {
        this.isFirstRequest = false;
        return;
      }
      setTimeout(() => {
        const curRow = this.tableData.find(data => data.v14s_table_id === row.v14s_table_id);
        for (const key in curRow) {
          if (key !== '_XID' && curRow[key] !== row[key]) {
            return;
          }
        }
        this.$refs.basicVxeTable.setCurrentRow(curRow);
      }, 10);
    },
    handlePageChange({ currentPage, pageSize }) {
      this.isBlank = false;
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.params.pageIndex = currentPage;
      this.params.pageSize = pageSize;
      this.getChartData();
      this.saveHistory();
    },
    handleCellClick({ row, rowIndex, column, columnIndex }) {
      // 设置选中行背景
      this.revertStyle();

      this.isBlank = false;
      this.selectRow = row;
      this.sendAllMessages(column);
      this.sendAdvLinkage(column, rowIndex, columnIndex);
    },
    handleHeaderCellClick() {
      this.isBlank = false;
    },
    handleFooterCellClick() {
      this.isBlank = false;
    },

    sendEmptyMessages() {
      const evtKey = this.orgConfig.events[0].key || 'row-click';
      const { key } = this.orgConfig.events[0].parameters[0];

      const outObj = {};
      outObj[key] = '';

      const keys = [this.config.events[0].parameters[0].key];
      const parameters = {
        [keys[0]]: '',
      };

      outObj[EMIT_PARAMS_OBJ] = {
        eventKey: this.config.events[0].key,
        type: 'terms',
        keys,
        parameters,
        widgetInstanceId: this.widgetInstanceId,
        componentName: 'page-table',
        sendTime: new Date().getTime(),
      };
      this.vsEmit(evtKey, outObj);
      this.saveHistory();
    },
    sendAllMessages(column, currentRowData) {
      let messageObj = {};
      if (this.typeSetting === 'vertical') {
        messageObj = this.selectRow;
      } else {
        this.tableDataForOutobj.forEach(data => {
          messageObj[data.col0] = data[column.property];
        });
      }
      messageObj = currentRowData ? currentRowData : messageObj;
      const evtKey = this.orgConfig.events[0].key || 'row-click';

      const outObj = {};

      const { key } = this.orgConfig.events[0].parameters[0];
      const { paramKey } = this.config.events[0]; // 字段名code
      const col = this.configTableColumn.find(t => String(t.mapping) === String(paramKey));
      this.executeAction('', this.selectRow);
      if (!col) {
        return;
      }
      outObj[key] = messageObj[col.field];

      const keys = [this.config.events[0].parameters[0].key];
      const parameters = {
        [keys[0]]: messageObj[col.field],
      };

      outObj[EMIT_PARAMS_OBJ] = {
        eventKey: this.config.events[0].key,
        type: 'terms',
        keys,
        parameters,
        widgetInstanceId: this.widgetInstanceId,
        componentName: 'page-table',
        sendTime: new Date().getTime(),
      };
      this.vsEmit(evtKey, outObj);

      // 保存事件状态
      this.saveHistory();
    },

    sendAdvLinkage(column, rowIndex, columnIndex) {
      let srcValues = {};
      let advancedLinkage;
      const { tableData } = this.config.config.data;
      let extKey;
      if (this.typeSetting === 'vertical') {
        const index = this.tableCheckBox ? columnIndex - 1 : columnIndex;
        srcValues = this.selectRow;
        fixAdvLinkage(tableData[index]);
        advancedLinkage = tableData[index]?.advancedLinkage;
        extKey = column.property;
      } else {
        this.tableData.forEach(data => {
          srcValues[data.col0] = data[column.property];
        });
        fixAdvLinkage(tableData[rowIndex]);
        advancedLinkage = tableData[rowIndex]?.advancedLinkage;
        extKey = this.tableData[rowIndex].col0;
      }
      this.sendAdvancedLinkagge(srcValues, advancedLinkage, extKey);

      // 发送联动面板的高级事件
      this.sendAdvancedLinkagge(srcValues);
    },

    saveHistory() {
      const storeObj = {
        row: this.selectRow || {},
        pageIndex: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
      };
      const pageId = getPageId(this);
      const { tenantId } = window._adoPremise;
      const pageStatus = storage.session.get(`${pageId}_${tenantId}`) || {};
      pageStatus[`state_${this.widgetInstanceId}`] = storeObj;
      storage.session.set(`${pageId}_${tenantId}`, pageStatus);
    },

    handleCheckboxChange({ records }) {
      this.checkBtnDisabled = records.length === 0;
    },
    handleCheckboxAll({ records }) {
      this.checkBtnDisabled = records.length === 0;
    },

    /*
     * 自定义样式渲染逻辑
     * 获取当前单元格配置项
     */
    getCurCell(row, column) {
      let curCell = {};
      const { tableData } = this.config.config.data;
      if (this.typeSetting === 'vertical') {
        curCell = tableData.find(item => item.field === column.property);
      } else {
        curCell = tableData.find(item => item.field === row.col0);
      }
      return curCell || {};
    },

    // 鼠标经过事件绑定
    mouseEnter({ row, columnIndex }) {
      let params = {};
      if (this.typeSetting === 'horizontal') {
        this.tableData.forEach(n => {
          params[n.col0] = n[`col${columnIndex}`];
        });
      } else {
        params = JSON.parse(JSON.stringify(row));
      }

      // hover单元格颜色修改
      const hoverRows = this.$refs[this.chartId].getElementsByClassName('row--hover');
      const cols = hoverRows[0].getElementsByTagName('td');
      const { hoverBgColor } = this.contentExtraStyle;
      const isHoverBgColorTransparent = hoverBgColor && hoverBgColor.length === 9 && hoverBgColor.lastIndexOf('00') === 7;
      for (let j = 0; j < cols.length; j++) {
        cols[j].style.backgroundColor = isHoverBgColorTransparent ? cols[j].style.backgroundColor : hoverBgColor;
      }

      const tooltipVm = this.$refs.Tooltip;
      for (const i in params) {
        if (typeof params[i] === 'string' && /^[\d,.]+$/.test(params[i])) {
          params[i] = dePermil(params[i]);
        }
      }
      tooltipVm.chartSerieItem = params;
    },
    mouseLeave({ row, rowIndex, rowid }) {
      this.revertStyle(rowIndex, rowid);
      const params = JSON.parse(JSON.stringify(row));
      params.type = 'mouseout';
      const tooltipVm = this.$refs.Tooltip;
      tooltipVm.chartSerieItem = params;
    },
    revertStyle(rowIndex, rowid) {
      let { backgroundColor } = this.getCssStyle('contentStyle');
      backgroundColor = backgroundColor ? backgroundColor.replace('!important', '') : '';
      const rows = this.$refs[this.chartId].getElementsByClassName('vxe-body--row');
      if (rowIndex === undefined) {
        for (let i = 0; i < rows.length; i++) {
          const cols = rows[i].getElementsByTagName('td');
          this.revertTdStyle(rows[i], cols, backgroundColor, i);
        }
      } else {
        const tr = Array.from((rows || [])).find(dom=>dom.getAttribute('rowid') === rowid) || {};
        const cols = tr.getElementsByTagName('td') || [];
        this.revertTdStyle(tr, cols, backgroundColor, rowIndex);
      }
    },
    revertTdStyle(tr, cols, backgroundColor, index) {
      const { isStripeVisiable, stripeBgColor, currentBgColor } = this.contentExtraStyle;
      const isCurrentBgColorTransparent = currentBgColor && currentBgColor.length === 9 && currentBgColor.lastIndexOf('00') === 7;
      const isStripeBgColorTransparent = stripeBgColor && stripeBgColor.length === 9 && stripeBgColor.lastIndexOf('00') === 7;
      for (let j = 0; j < cols.length; j++) {
        let colBgColor = backgroundColor;

        // 当前单元格是设置了列扩展的--如果这里不调用会导致cellStyle方法不会再次执行
        const { columnSetList } = this.config.config.property;
        this.updateColumnIdAndConfig(columnSetList);
        if (!tr?.classList?.contains('row--current')) {
          colBgColor = isStripeVisiable && index % 2 === 1 && !isStripeBgColorTransparent ? stripeBgColor : backgroundColor;
        } else {
          if (isCurrentBgColorTransparent) {
            colBgColor = isStripeVisiable && index % 2 === 1 && !isStripeBgColorTransparent ? stripeBgColor : backgroundColor;
          } else {
            colBgColor = currentBgColor;
          }
        }
        cols[j].style.backgroundColor = colBgColor;
      }
    },
    handleAsTooltip(filterRes) {
      const { data } = this.config.config;
      this.handleResult(filterRes, data.dataSourceType);
    },
    updateComponentByResolution() {
      const w = document.getElementById(`chartMain${this.chartId}`).offsetWidth;
      this.deboumceHandlePagerAdjust(w);
      setTimeout(() => {
        this.deboumceSetAdjustWH();
      }, 100);
    },
    handleEmitEvent() {
      const { property: { emitEvent: emitEvent } } = this.config.config;
      if (!emitEvent.isEmitEvent || !emitEvent.rowIndex) {
        return;
      }
      const { rowIndex } = emitEvent;
      let currentRowData = {};
      if (this.typeSetting === 'vertical') {
        currentRowData = this.tableData[rowIndex - 1];
      } else {
        this.tableData.forEach(data => {
          currentRowData[data.col0] = data[`col${rowIndex}`];
        });
      }
      this.sendAllMessages({}, currentRowData);
      this.defaultEmitAdvEvent(rowIndex);
    },
    defaultEmitAdvEvent(rowIndex) {
      const evtKeys = [];
      this.configTableColumn.forEach(col=>{
        if (col?.type !== 'checkbox' && col.advancedLinkage?.linkageDatas?.length) {
          evtKeys.push(col.field);
        }
      });
      let srcValues = {};
      let advancedLinkage;
      const { tableData } = this.config.config.data;
      if (this.typeSetting === 'vertical') {
        srcValues = this.tableData[rowIndex - 1];
      } else {
        this.tableData.forEach(data => {
          srcValues[data.col0] = data[`col${rowIndex}`];
        });
      }
      tableData.forEach((item, index)=>{
        fixAdvLinkage(tableData[index]);
        advancedLinkage = tableData[index].advancedLinkage;
        const extKey = item.field;
        this.sendAdvancedLinkagge(srcValues, advancedLinkage, extKey);
      });
    },
  },
};
</script>
<style lang="less" scoped>
// 图表通用样式,主要有黑色loading 和 黑色 ‘没有数据’,样式名需一致
@import '../../common/chart.less';
</style>
<style lang="less" scoped>
// @import '../page-table-panel-property/theme.less';
@import '../../common/variables.less';
@dark_background: #102d44;
@dark_border: #1a3f60;

.page-table {
  .title {
    width: 100%;
    height: 50px;
    font-size: 18px;
    position: relative;
    span {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 2.5%;
    }
  }
  .btn-box {
    .exportBtn {
      padding: 0;
    }
  }
  :deep(.el-button--mini.is-round) {
    padding: 0;
  }
  .displayBox {
    height: 100%;
    max-height: calc(~'100% - 2px');
    .tableContentBox {
      width: 100%;
      flex: 1;
      min-height: 0; //兼容火狐
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tableContentBox-main {
        height: 100%;
        width: 100%;
      }
      :deep(.vxe-grid) {
        height: 100%;
        &.cont-wrap{
          .vxe-body--row{
            .vxe-cell{
              white-space: normal !important;
            }
          }
        }
        .vxe-table {
          .vxe-body--column:not(.col--ellipsis),
          .vxe-footer--column:not(.col--ellipsis),
          .vxe-header--column:not(.col--ellipsis) {
            padding: 0;
          }
          .jump-cell {
            text-decoration: underline;
            cursor: pointer;
          }
          .vxe-cell--checkbox {
            font-size: initial;
          }
          .vxe-cell--filter {
            padding: 0;
          }

          .vxe-cell--checkbox {
            .vxe-checkbox--icon {
              display: block;
              &::before {
                font-size: 16px;
                font-weight: normal;
              }
            }
          }
        }
        &.empty-table{
          .vxe-table--body{
            display: none;
          }
        }
      }

      :deep(.vxe-pager.is--perfect) {
        height: 45px;
        background-color: transparent;
      }
    }
  }
}
.dark {
  :deep(.el-button) {
    background-color: #187e91;
    border-color: #187e91 !important;
    color: #ffffff !important;
  }

  :deep(.vxe-table) {
    .vxe-table--fixed-left-wrapper {
      border-right: none;
    }
    .vxe-header--gutter {
      background-image: none !important;
    }
    // 筛选组件
    .vxe-table--filter-wrapper {
      background-color: @dark_background;
      border-color: @dark_border;
    }
    .jump-cell {
      color: #00f7ff;
    }

    .el-progress {
      .el-progress-bar__outer {
        background-color: #064559;
      }
    }

    .vxe-cell--checkbox {
      .vxe-checkbox--icon {
        &::before {
          color: #588ba8;
        }
      }
    }

    .row--hover {
      color: #ffffff !important;
      background-color: transparent !important;
      .vxe-body--column.col--ellipsis {
        background-color: #255074;
      }
    }
    .row--current {
      background-color: transparent !important;
      .vxe-body--column {
        background-color: #255074;
      }
    }
    .row--stripe {
      background-color: transparent !important;
    }
  }
  :deep(.vxe-header--row) {
    th {
      background-image: linear-gradient(rgb(26, 63, 96), rgb(26, 63, 96)),
        linear-gradient(rgb(26, 63, 96), rgb(26, 63, 96));
    }
  }
  :deep(.vxe-pager.is--perfect) {
    border: none;
    .vxe-pager--wrapper {
      .vxe-pager--total {
        color: #859ebb;
      }
      .vxe-select--panel {
        background-color: transparent;
        .vxe-select-option--wrapper {
          background-color: @droplist_bg_color_dark;
          border-color: @droplist_border_color_dark;
          .vxe-select-option {
            color: #ffffff;
            &.is--hover {
              background-color: @droplist_bg_hover_color_dark;
              color: #ffffff;
            }
          }
          &::-webkit-scrollbar-thumb {
            background-color: @droplist_scrollbar_color_dark;
          }
        }
      }

      .vxe-input--inner,
      .vxe-pager--goto {
        background: #061c2e;
        border: 1px solid #1a5171;
        color: #859ebb;
      }
      .vxe-pager--jump {
        color: #859ebb;
      }
      .vxe-pager--jump-prev,
      .vxe-pager--prev-btn,
      .vxe-pager--num-btn,
      .vxe-pager--next-btn,
      .vxe-pager--jump-next {
        background-color: #102d44;
        border: 1px solid #1a5171;
        color: #f4f5f6;
      }
      .vxe-pager--num-btn.is--active {
        background-color: #4ca3bf;
      }
      .is--disabled {
        color: #1a5171;
      }
    }
  }
}

.real {
  :deep(.el-button) {
    background-color: #409eff;
    border-color: #409eff !important;
    color: #ffffff !important;
  }

  :deep(.vxe-table) {
    .vxe-table--fixed-left-wrapper {
      border-right: none;
    }
    .vxe-header--gutter {
      background-image: none !important;
    }
    // 筛选组件
    .vxe-table--filter-wrapper {
      background-color: @dark_background;
      border-color: @dark_border;
    }
    .jump-cell {
      color: #00f7ff;
    }

    .el-progress {
      .el-progress-bar__outer {
        background-color: #064559;
      }
    }

    .vxe-cell--checkbox {
      .vxe-checkbox--icon {
        &::before {
          color: #606266;
        }
      }
    }

    .row--hover {
      color: #ffffff !important;
      background-color: transparent !important;
      .vxe-body--column.col--ellipsis {
        background-color: #333;
      }
    }
    .row--current {
      background-color: transparent !important;
      .vxe-body--column {
        background-color: #333;
      }
    }
    .row--stripe {
      background-color: transparent !important;
    }
  }
  :deep(.vxe-header--row) {
    th {
      background-image: linear-gradient(rgb(26, 63, 96), rgb(26, 63, 96)),
        linear-gradient(rgb(26, 63, 96), rgb(26, 63, 96));
    }
  }
  :deep(.vxe-pager.is--perfect) {
    border: none;
    .vxe-pager--wrapper {
      .vxe-pager--total {
        color: #eee;
      }
      .vxe-select--panel {
        background-color: transparent;
        .vxe-select-option--wrapper {
          background-color: @droplist_bg_color_dark;
          border-color: @droplist_border_color_dark;
          .vxe-select-option {
            color: #ffffff;
            &.is--hover {
              background-color: @droplist_bg_hover_color_dark;
              color: #ffffff;
            }
          }
          &::-webkit-scrollbar-thumb {
            background-color: @droplist_scrollbar_color_dark;
          }
        }
      }

      .vxe-input--inner,
      .vxe-pager--goto {
        background: #191919;
        border: 1px solid #676767;
        color: #eee;
      }
      .vxe-pager--jump {
        color: #eee;
      }
      .vxe-pager--jump-prev,
      .vxe-pager--prev-btn,
      .vxe-pager--num-btn,
      .vxe-pager--next-btn,
      .vxe-pager--jump-next {
        background-color: #191919;
        border: 1px solid #676767;
        color: #eee;
      }
      .vxe-pager--num-btn.is--active {
        background-color: #18273e;
      }
      .is--disabled {
        color: #5f5f5f;
      }
    }
  }
}

.light {
  :deep(.vxe-table) {
    .jump-cell {
      color: #00aaff;
    }
    .row--hover {
      background-color: transparent !important;
      .vxe-body--column.col--ellipsis {
        background-color: #d5f1ff;
      }
    }
    .row--current {
      background-color: transparent !important;
      .vxe-body--column {
        background-color: #ecf5ff;
      }
    }
    .row--stripe {
      background-color: transparent !important;
    }
  }

  :deep(.vxe-pager.is--perfect) {
    border: none;
  }
}

:deep(.vxe-table) {
  overflow: auto;
  .vxe-cell {
    padding: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
}
:deep(.vxe-table--footer-wrapper) {
  overflow: hidden;
}
.totalAdjust {
  height: 100%;
  display: flex;
  flex-direction: column;
  :deep(.vxe-table) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  :deep(.vxe-table--main-wrapper) {
    display: flex;
    flex-direction: column;
  }
  :deep(.vxe-table--body-wrapper) {
    width: 100%;
    flex: 1;
  }
}
:deep(.vxe-table--main-wrapper) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
:deep(.vxe-table--body-wrapper) {
  width: 100%;
  flex: 1;
  .vxe-table--empty-block{
    width: calc(100% - 10px) !important;
  }
}
:deep(.vxe-table--render-wrapper) {
  height: 100%;
}
:deep(.vxe-table--body) {
  overflow: auto;
  min-width: 100%;
}
.table-vertical {
  :deep(.vxe-table--body) {
    width: 100% !important;
  }
  :deep(.vxe-table--header) {
    width: 100% !important;
  }
}
:deep(.vxe-header--gutter) {
  display: none;
}
:deep(.vxe-table--render-default .vxe-body--column.col--ellipsis),
:deep(.vxe-table--render-default.vxe-editable .vxe-body--column),
:deep(.vxe-table--render-default .vxe-footer--column.col--ellipsis),
:deep(.vxe-table--render-default .vxe-header--column.col--ellipsis) {
  height: 0;
}
</style>
<style lang="less">
/* 全局loading样式修改 */
@import '../../common/variables.less';
.chartMain .loading .el-loading-spinner .circular {
  width: 34px !important;
  height: 34px !important;
}

.chartMain .el-dialog__header {
  padding: 9px 20px 10px !important;
  background: #2a3352 !important;
  text-align: left;
  box-sizing: border-box;
  height: 50px;
  line-height: 32px;
}

.chartMain .el-dialog__title {
  text-align: left;
  font-size: 18px;
  line-height: 18px !important;
  color: #b2d3fe !important;
}

.chartMain .el-dialog__body {
  padding: 10px 20px 30px 20px;
  background: #1a2032 !important;
  line-height: 24px;
  font-size: 14px;
}

.chartMain .el-dialog__headerbtn .el-dialog__close {
  color: #b2d3fe !important;
}

.chartMain .dialog-footer {
  text-align: right;
  margin-bottom: -14px;
  margin-right: 4px;
}

.chartMain .el-dialog__headerbtn {
  top: 15px;
  font-size: 18px;
}

.visualComponents_theme_dark {
  .vxe-select--panel {
    background-color: transparent;
    .vxe-select-option--wrapper {
      background-color: @droplist_bg_color_dark;
      border-color: @droplist_border_color_dark;
      .vxe-select-option {
        color: @text_color_dark;
        &.is--hover {
          background-color: @droplist_bg_hover_color_dark;
          color: @text_color_dark;
        }
      }
      &::-webkit-scrollbar-thumb {
        background-color: @droplist_scrollbar_color_dark;
      }
    }
  }
}
.asTooltip .vxe-table--body-wrapper {
  overflow-x: hidden !important;
}
</style>
